<template>
	<ui-page class="mine" :bg-color="true">
		<view class="mine__profile" @click="handleProfileClick">
			<view class="mine__profile-avatar">
				<ui-avatar :src="currentUser.avatar" size="large"></ui-avatar>
			</view>
			<view class="mine__profile-main">
				<view class="mine__profile-name">{{ currentUser.userName }}</view>
				<view class="mine__profile-tips">查看个人资料与更多设置</view>
			</view>
		</view>
		<view class="mine__tips" v-if="!checkFlag">
			<bi-follow-official-account @close="handleCloseTips"></bi-follow-official-account>
		</view>
		<view class="mine__menu">
			<ui-form>
				<ui-form-group>
					<ui-form-item :show-arrow="true" label="系统消息" @click="handleNoticeClick"></ui-form-item>
					<ui-form-item :show-arrow="true" label="在线客服" @click="handleServiceClick"></ui-form-item>
					<ui-form-item :show-arrow="true" label="数据汇总" @click="handleDataCountClick"></ui-form-item>
				</ui-form-group>
			</ui-form>
		</view>
		<view class="mine__actions">
			<ui-button block type="primary" @click="handleTestClick">测试上传图片识别</ui-button>
		</view>
		<view class="mine__actions">
			<ui-button block type="primary" @click="handleImageClick">测试图片流识别</ui-button>
		</view>
		<view class="mine__actions">
			<ui-button block type="primary" @click="handleLogoutClick">退出登录</ui-button>
		</view>
		<ui-popup
			v-model="showServicePopup"
			type="center"
		>
			<mine-service @confirm="handleConfirmClick"></mine-service>
		</ui-popup>
	</ui-page>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import MineService from './mine-service.vue'
	import BiFollowOfficialAccount from '@/common/follow-official-account/follow-official-account.vue'
	import { getShareData } from '@/utils/share.js'
	import { checkIfAttention } from '@/apis/order.js';
	
	export default {
		components: {
			MineService,
			BiFollowOfficialAccount
		},
		data() {
			return {
				hideTips: false,
				showServicePopup: false
			}
		},
		onLoad() {

		},
		computed: {
			...mapGetters([
				'currentUser'
			])
		},
		onShareAppMessage () {
			return getShareData()
		},
		methods: {
			...mapActions([
				'SetUserLogout'
			]),
			handleTestClick () {
				//选择图片
				wx.chooseImage({
				   count: 1,
				   sizeType: ['original', 'compressed'],
				   sourceType: ['album', 'camera'],
				}).then(res1 => {
					wx.cloud.uploadFile({
						cloudPath: Date.now() + '.png',
						filePath: res1.tempFilePaths[0]
					}).then(res2 => {
						wx.cloud.getTempFileURL({
							fileList: [res2.fileId]
						}).then(res3 => {
							wx.cloud.callFunction({
								name: 'vehicleLicenseOCR',
								data: {
									imgUrl: res3.fileList[0].tempFileURL
								},
								success (res) {
									console.log(res)
								},
								fail (err) {
									console.log(err)
								}
							})
						})
					})
				})
			},
			handleImageClick () {
				//选择图片
				wx.chooseImage({
				   count: 1,
				   sizeType: ['original', 'compressed'],
				   sourceType: ['album', 'camera'],
				}).then(res1 => {
					const buffer = wx.getFileSystemManager().readFileSync(res1.tempFilePaths[0])
					wx.cloud.callFunction({
						name: 'vehicleLicenseOCR',
						data: {
							img: {
								'contentType': 'image/png',
								'value': buffer
							}
						},
						success (res) {
							console.log(res)
						},
						fail (err) {
							console.log(err)
						}
					})
				})
			},
			handleCloseTips () {
				this.hideTips = true
			},
			handleServiceClick () {
				this.showServicePopup = true
			},
			handleNoticeClick () {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			handleProfileClick () {
				uni.navigateTo({
					url: '/packages/mine/mine-setting/mine-setting'
				})
			},
			handleDataCountClick () {
				uni.navigateTo({
					url: '/packages/mine/mine-data/mine-data'
				})
			},
			handleConfirmClick () {
				this.showServicePopup = false
			},
			handleLogoutClick () {
				return this.SetUserLogout().then(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				})
			}
		}
	}
</script>

<style lang="less">
.mine{
	position: relative;
}
.mine__profile{
	display: flex;
	flex-direction: row;
	background-color: #fff;
	padding: 16px 36px 16px 16px;
	line-height: 1.7em;
	position: relative;
	&:active {
		background-color: rgba(0,0,0,.06);
	}
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%) rotate(45deg);
		border: 1px solid #ddd;
		width: 8px;
		height: 8px;
		border-left: 0;
		border-bottom: 0;
	}
}
.mine__profile-avatar{
	margin-right: 16px;
}
.mine__profile-main{
	padding: 4px 0;
}
.mine__profile-name{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 2px;
}
.mine__profile-tips{
	color: #666666;
	font-size: 12px;
}
.mine__tips{
	margin: 16px 0;
	padding: 0 16px;
}
.mine__menu{
	margin-top: 16px;
}
.mine__actions{
	padding: 16px;
}
</style>
